<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>日志列表 - [[${configs.title}]]</title>
    <link rel="stylesheet" href="/statics/layui-v2.8.15/css/layui.css">
    <link rel="stylesheet" href="/statics/css/admin/common.css">
</head>
<body>
<!-- 内容主体区域 -->
<div class="main-body">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>日志列表</legend>
    </fieldset>
    <form class="layui-form">
        <div class="layui-form-item">
            <div class="layui-input-inline">
                <input type="text" name="keyword" autocomplete="off" placeholder="请输入ip地址或接口" class="layui-input" th:value="${keyword}">
            </div>
            <div class="layui-input-inline">
                <input type="text" name="startDate" id="startDate" autocomplete="off" placeholder="请输入开始时间" class="layui-input" th:value="${startDate}">
            </div>
            <div class="layui-input-inline">
                <input type="text"  name="endDate" id="endDate"  autocomplete="off" placeholder="请输结束时间" class="layui-input" th:value="${endDate}">
            </div>
            <div class="layui-input-inline">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="search">搜 索</button>
            </div>
        </div>
    </form>
    <table class="layui-table">
        <thead>
        <tr>
            <th width="40">序号</th>
            <th>接口</th>
            <th>访问IP地址</th>
            <th>请求参数</th>
            <th>返回结果</th>
            <th>操作时间</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="entries,stat:${pageData.records}">
            <td th:text="${entries['id']}"></td>
            <td th:text="${entries['url']}"></td>
            <td th:text="${entries['ip']}"></td>
            <td>
                <span th:text="${entries['paramsDesc']}">

                </span>
                &nbsp;&nbsp;
                <span id="showMore" th:if="${not #strings.isEmpty(entries['params'])}">
                    <a href="JavaScript:;" th:data-params="${entries['params']}">查看更多</a>
                </span>
            </td>
            <td th:text="@{${entries['returnCode']}}"></td>
            <td th:text="${entries['formatCreatedTime']}"></td>
        </tr>
        </tbody>
    </table>
    <div class="layui-row">
        <div id="page" align="right"></div>
    </div>
</div>
<script src="/statics/layui-v2.8.15/layui.js"></script>
<script type="text/javascript">
    let module = "log", moduleName= "日志", total = [[${pageData.total}]] ,
        page = [[${pageData.current}]], limit = [[${pageData.size}]];
    layui.use(['layer', 'form', 'jquery', 'laydate'], function () {
        let $ = layui.jquery, form = layui.form, layer = layui.layer, laypage = layui.laypage, laydate = layui.laydate;
        laypage.render({
            elem: 'page'
            , count: total
            , limit: limit
            , curr: page
            , layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
            , jump: function (obj) {
                let keyword = $("input[name='keyword']").val(), startDate = $("input[name='startDate']").val(), endDate = $("input[name='endDate']").val();
                if (obj.curr !== page || obj.limit !== limit) {
                    location.href =  '/admin/log?page=' + obj.curr + '&size=' + obj.limit + (keyword ? '&keyword=' + keyword : '') + (startDate ? '&startDate=' + startDate : '') + (endDate ? '&endDate=' + endDate : '');
                }
            }
        });
        form.on('submit(search)', function (data) {
            let keyword = $("input[name='keyword']").val(), startDate = $("input[name='startDate']").val(), endDate = $("input[name='endDate']").val();
            if (keyword === '' && startDate === '' && endDate === '') {
                return false;
            }
            location.href =  '/admin/log?keyword=' + keyword + (startDate ? '&startDate=' + startDate : '') + (endDate ? '&endDate=' + endDate : '');
            return false;
        });
        //日期
        laydate.render({
            elem: '#startDate'
        });
        laydate.render({
            elem: '#endDate'
        });
        $('#showMore a').on('click', function () {
            let params = $(this).data('params');
            showDetail(params);
        });
        function showDetail(content) {
            console.log(content);
            layer.open({
                type: 1, // page 层类型
                area: ['1000px', '600px'],
                title: '参数详情',
                shade: 0.6, // 遮罩透明度
                shadeClose: false, // 点击遮罩区域，关闭弹层
                maxmin: true, // 允许全屏最小化
                anim: 0, // 0-6 的动画形式，-1 不开启
                content: '<div class="show-detail">'+JSON.stringify(content)+'</div>'
            });
        }
    });
</script>
<script src="/statics/js/common.js"></script>
</body>
</html>